<!--
 * @Author: daidai
 * @Date: 2022-03-01 14:13:04
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-27 15:04:49
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-top.vue
-->
<template>
  <Echart
    id="rightTop"
    :options="option"
    class="right_top_inner"
    v-if="pageflag"
    ref="charts"
  />
</template>

<script>
import { currentGET } from "api/modules";
import { graphic } from "echarts";
export default {
  data() {
    return {
      option: {},
      pageflag: false,
      timer: null,
      dataList: [],
    };
  },
  created() {},

  mounted() {
    this.getData();
    setInterval(this.getData, 10000);
  },
  methods: {
    getData() {
      this.pageflag = true;
      currentGET("big42").then((res) => {
        if (res.code == 200) {
          this.dataList = res.data;
          this.init();
        } else {
          this.pageflag = false;
          this.$Message({
            text: res.msg,
            type: "warning",
          });
        }
      });
    },
    init() {
      this.option = {
        xAxis: {
          type: "category",
          boundaryGap: false,
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "30%"],
        },
        visualMap: {
          type: "piecewise",
          show: false,
          dimension: 0,
          seriesIndex: 0,
          pieces: [
            {
              gt: 1,
              lt: 3,
              color: "rgba(0, 0, 180, 0.4)",
            },
            {
              gt: 5,
              lt: 7,
              color: "rgba(0, 0, 180, 0.4)",
            },
          ],
        },
        series: [
          {
            type: "line",
            smooth: 0.6,
            symbol: "none",
            lineStyle: {
              color: "#5470C6",
              width: 5,
            },
            markLine: {
              symbol: ["none", "none"],
              label: { show: false },
              data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }],
            },
            areaStyle: {},
            data: this.dataList,
            // data: [
            //   ["2019-10-10", 200],
            //   ["2019-10-11", 560],
            //   ["2019-10-12", 750],
            //   ["2019-10-13", 580],
            //   ["2019-10-14", 250],
            //   ["2019-10-15", 300],
            //   ["2019-10-16", 450],
            //   ["2019-10-17", 300],
            //   ["2019-10-18", 100],
            // ],
          },
        ],
      };
    },
  },
};
</script>